<template>
  <div id="app">
    <header class="app-header">
      <div class="welcome">
        <h1>🧠 Brain Wave Frontend</h1>
        <p>欢迎使用 Brain Wave 前端应用！</p>
      </div>
    </header>
    
    <main class="app-main">
      <div class="left-panel">
        <RecordingControl :brainWaveClient="brainWaveClient" />
      </div>
      <div class="right-panel">
        <BrainWaveChart :brainWaveClient="brainWaveClient" />
        <SleepStateChart :brainWaveClient="brainWaveClient" />
      </div>
    </main>
  </div>
</template>

<script>
import RecordingControl from './components/RecordingControl.vue'
import BrainWaveChart from './components/BrainWaveChart.vue'
import SleepStateChart from './components/SleepStateChart.vue'
import BrainWaveClient from './utils/BrainWaveClient.js'

export default {
  name: 'App',
  components: {
    RecordingControl,
    BrainWaveChart,
    SleepStateChart
  },
  data() {
    return {
      brainWaveClient: null,
      globalState: {
        isConnected: false,
        isRecording: false,
        currentSession: null,
        lastError: null
      }
    }
  },
  created() {
    this.initializeBrainWaveClient();
  },
  methods: {
    // 初始化WebSocket客户端
    initializeBrainWaveClient() {
      try {
        this.brainWaveClient = new BrainWaveClient();
        
        // 设置全局错误处理
        this.brainWaveClient.onError = (error) => {
          console.error('WebSocket全局错误:', error);
          this.globalState.lastError = error.message || '连接错误';
          
          // 更新连接状态
          this.globalState.isConnected = false;
        };
        
        // 设置连接状态监听
        this.brainWaveClient.onConnectionChange = (connected) => {
          this.globalState.isConnected = connected;
          if (!connected) {
            this.globalState.isRecording = false;
            this.globalState.currentSession = null;
          }
        };
        
        console.log('BrainWaveClient 初始化成功');
      } catch (error) {
        console.error('初始化BrainWaveClient失败:', error);
        this.globalState.lastError = '客户端初始化失败';
      }
    },
    
    // 获取全局状态
    getGlobalState() {
      return this.globalState;
    },
    
    // 更新会话状态
    updateSessionState(sessionId, isRecording = false) {
      this.globalState.currentSession = sessionId;
      this.globalState.isRecording = isRecording;
    },
    
    // 清除错误信息
    clearError() {
      this.globalState.lastError = null;
    }
  },
  beforeUnmount() {
    // 应用销毁前清理WebSocket连接
    if (this.brainWaveClient) {
      this.brainWaveClient.disconnect();
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #2c3e50;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 50%, #E0F6FF 100%);
  color: #4682B4;
  box-shadow: 0 2px 10px rgba(135, 206, 235, 0.2);
  min-height: 80px;
}

.welcome {
  text-align: center;
}

.welcome h1 {
  margin: 0 0 5px 0;
  font-size: 1.6rem;
  text-shadow: 0 2px 4px rgba(70, 130, 180, 0.3);
}

.welcome p {
  margin: 0;
  opacity: 0.8;
  font-size: 1rem;
}

.app-main {
  flex: 1;
  display: flex;
  gap: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
}

.left-panel {
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow-y: auto;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 100%;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .left-panel {
    flex: 0 0 300px;
  }
}

@media (max-width: 1024px) {
  .app-main {
    flex-direction: column;
    max-height: none;
    overflow: visible;
  }
  
  .left-panel {
    flex: none;
    max-height: 400px;
  }
  
  .right-panel {
    flex: none;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 10px 15px;
    min-height: 60px;
  }
  
  .welcome h1 {
    font-size: 1.4rem;
  }
  
  .welcome p {
    font-size: 0.9rem;
  }
  
  .app-main {
    padding: 10px;
    gap: 10px;
    min-height: calc(100vh - 60px);
  }
  
  .left-panel {
    flex: 0 0 auto;
    max-height: 350px;
  }
}
</style>